<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->

    <a-form ref="formRef" :model="formState" :rules="RULES" layout="vertical">
      <a-collapse v-model:active-key="activeKey" :bordered="true" expand-icon-position="right">
        <a-collapse-item key="A" header="菜单基础设置">
          <a-row :gutter="[12,12]">
            <a-col :span="12">
              <a-form-item label="所属模块/分组" field="parentId">
                <smart-tree-selector v-model="formState.parentId" :url="SystemOptions.MenuTreeOptions"  placeholder="请选所属模块/分组"/>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="菜单标题" :content-flex="false" :rules="RULES.meta.title" field="meta.title">
                <a-input v-model="formState.meta.title" placeholder="请填写菜单标题"/>
              </a-form-item>
            </a-col>


            <a-col :span="12">
              <a-form-item label="菜单路径" field="path">
                <a-input v-model="formState.path" placeholder="请填写菜单路径" @change="onPathChange"/>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="组件名称" field="name">
                <a-input v-model="formState.name" placeholder="请填写组件名称"/>
              </a-form-item>
            </a-col>


            <a-col :span="24">
              <a-form-item label="组件路径" field="component">
                <a-input v-model="formState.component" placeholder="请填写组件路径">
                  <template #prepend>@/pages/modules</template>

                </a-input>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="页面简介" :content-flex="false" :rules="RULES.meta.description">
                <a-input v-model="formState.meta.description" placeholder="请填写页面简介"/>
              </a-form-item>
            </a-col>


          </a-row>
        </a-collapse-item>

        <a-collapse-item key="B" header="菜单高级设置">

          <a-row :gutter="[12,12]">


            <a-col :span="8">
              <a-form-item label="根据不同参数开启新页签">
                <smart-bool v-model="formState.meta.dynamicNewTab" true-text="是" false-text="否"/>
              </a-form-item>
            </a-col>


            <a-col :span="8">
              <a-form-item label="是否开启页面缓存">
                <smart-bool v-model="formState.meta.enableKeepAlive" true-text="是" false-text="否"/>

              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="是否在菜单显示红点">
                <smart-bool v-model="formState.meta.dot" true-text="是" false-text="否"/>

              </a-form-item>
            </a-col>


            <a-col :span="8">
              <a-form-item label="是否在导航菜单中隐藏菜单">
                <smart-bool v-model="formState.meta.hiddenInMenu" true-text="是" false-text="否"/>

              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="是否在多页签隐藏页面">
                <smart-bool v-model="formState.meta.hiddenInTab" true-text="是" false-text="否"/>

              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`显示排序值 [ ${formState.sort} ]` " field="sort"
                           tooltip="升序排序 显示值越小 显示越靠前">
                <a-slider v-model="formState.sort"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-collapse-item>

        <a-collapse-item key="C" header="页面功能设置">

          <a-transfer v-model="formState.apiTokens" :title="trData.title" show-search :data="trData.data" one-way/>
        </a-collapse-item>

      </a-collapse>


    </a-form>


    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>

import {reactive, ref} from "vue";
import {EditDrawer} from '@/libs/core'
import {SystemOptions} from '@/libs/options'
import {MENU_EDIT} from "../resource/form";
import {SystemHttp} from '../resource/http'
import {RequestUtil} from "@/utils";


const {BODY, RULES} = MENU_EDIT
const activeKey = ref(['A', 'C'])

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addMenu, updateMenu} = SystemHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}

const service = new EditDrawer(config).setAddRequest(addMenu).setUpdateRequest(updateMenu)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改页面' : '新建页面'

service.afterValidateHandler = () => {
  formState.value.attribute = {value: "PAGE"}
  return true
}

const trData = reactive({
  data: [],
  title: ['待选功能', '已选功能']
})

const loadData = async () => {
  const {data} = await RequestUtil.getAjax(SystemOptions.ApiOptions)
  trData.data = data
}
loadData()

const onPathChange = (e) => {
  formState.value.component = `${e}/index.vue`
  formState.value.name = e.replace("/", "").replaceAll("/", "-")

}
</script>

<style lang="less" scoped>
:deep(.arco-transfer) {
  padding-bottom: 12px;
}

:deep(.arco-transfer-view) {
  width: 50%;
  height: 400px;
}
</style>